<template>
  <div id="banner">
    <div id="btn-left" class="btn-left"></div>
    <ul id="ul-imgs" class="ul-imgs">
      <li @mouseover="clearTimer" @mouseout ="runInv">
        <a href="javascript:;">
          <img :src="dataList[currentIndex]" />
        </a>
      </li>
    </ul>
    <div class="page" v-if="this.dataList.length>1">
      <ul id="ul-idxs" class="ul-index">
        <li class="active" @click="gotoPage(prevIndex)">&lt;</li>
        <li
          v-for="(item,index) in dataList"
          :key="index"
          @click="gotoPage(index)"
          :class="{'current':currentIndex == index}"
          v-text="index+1"
        ></li>
        <li @click="gotoPage(nextIndex)">&gt;</li>
      </ul>
    </div>
    <div id="btn-right" class="btn-right"></div>
  </div>
</template>

<script>
import tc01 from "@/assets/banner/01.jpg";
import tc02 from "@/assets/banner/02.jpg";
import tc03 from "@/assets/banner/03.jpg";
import tc04 from "@/assets/banner/04.jpg";
import tc05 from "@/assets/banner/04.jpg";
export default {
  data() {
    return {
      dataList: [tc01, tc02, tc03, tc04],
      currentIndex: 0, //默认显示图图片
      timer: null //定时器
    };
  },
  created() {
    this.runInv();
  },
  methods: {
    // 清楚定时器
    clearTimer() {
      window.clearInterval(this.timer);
    },
    //定时器
    runInv() {
      this.timer = setTimeout(() => {
        this.gotoPage(this.nextIndex);
        this.timer();
      }, 1000);
    },
    gotoPage(index) {
      this.currentIndex = index;
    }
  },
  computed: {
    // 上一张
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.dataList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    nextIndex() {
      if (this.currentIndex == this.dataList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    }
  }
};
</script>

<style scoped>
ul {
  list-style: none;
  display: flex;
}
.current {
  color: #ff0;
}
</style>